<!--引入公共的模板-->
{{extend './layout.html'}}
{{block 'content'}}

<!--轮播图-->
<div id="carouselExampleIndicators" class="carousel slide mt-5 mb-5 container" data-bs-ride="carousel">
  <div class="carousel-indicators">
    {{each banner}}
    {{if $index==0}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to={{$index}} class="active" ></button>
    {{else}}
    <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to={{$index}} ></button>
    {{/if}}
    {{/each}}
  </div>
  <div class="carousel-inner" style="height: 350px;">
    {{each banner}}
    {{if $index==0}}
    <div class="carousel-item active">
      <img src={{$value.src}} class="d-block w-100 h-100" alt="{{$index}}">
    </div>
    {{else}}
    <div class="carousel-item">
      <img src={{$value.src}} class="d-block w-100 h-100" alt="{{$index}}">
    </div>
    {{/if}}
    {{/each}}
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>
<!--精品-->
<div class="container">
  <div class="row justify-content-between">
    <h2 class="col-3">精品</h2>
    <a class="col-2 text-end" href="">查看更多></a>
  </div>
  <div class="row">
    {{ each boutiqueIndex }}
    <div class="col-3">
      <a href="{{ '/detail?id='+$value.article_id }}">
        <div class="card">
          <img src="{{ $value.thumb }}" class="card-img-top w-100" alt="{{$index}}" style="height: 180px;">
          <div class="card-body">
            <h5 class="card-title">{{ $value.title }}</h5>
            <p class="card-text"  style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{ $value.intro }}</p>
          </div>
        </div>
      </a>
    </div>
    {{ /each}}
  </div>
</div>
<!--免费-->
<div class="container mt-4">
  <div class="row justify-content-between">
    <h2 class="col-3">免费</h2>
    <a class="col-2 text-end" href="/free">查看更多></a>
  </div>
  <div class="row">
    {{ each freeIndex }}
    <div class="col-3">
      <a href="{{ '/detail?id='+$value.article_id }}">
        <div class="card">
          <img src="{{ $value.thumb }}" class="card-img-top w-100" alt="{{$index}}" style="height: 180px;">
          <div class="card-body">
            <h5 class="card-title">{{ $value.title }}</h5>
            <p class="card-text"  style="overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;">{{ $value.intro }}</p>
          </div>
        </div>
      </a>
    </div>
    {{ /each }}
  </div>
</div>
{{/block}}